{% extends "base.html" %}

{% block title %}首页 - 农场{% endblock %}

{% block content %}
    <!-- 轮播图 -->
    <div class="relative mb-10 overflow-hidden rounded-lg">
        <div class="flex transition-transform duration-500" style="transform: translateX(0%);">
            <div class="w-full flex-shrink-0">
                <img src="https://picsum.photos/id/20/1200/300" alt="促销活动" class="w-full h-64 md:h-80 object-cover">
            </div>
            <div class="w-full flex-shrink-0">
                <img src="https://picsum.photos/id/21/1200/300" alt="新品上市" class="w-full h-64 md:h-80 object-cover">
            </div>
            <div class="w-full flex-shrink-0">
                <img src="https://picsum.photos/id/22/1200/300" alt="限时折扣" class="w-full h-64 md:h-80 object-cover">
            </div>
        </div>
        
        <!-- 轮播控制按钮 -->
        <button class="absolute left-2 top-1/2 -translate-y-1/2 bg-black/50 text-white p-2 rounded-full hover:bg-black/70">
            <i class="fa fa-chevron-left"></i>
        </button>
        <button class="absolute right-2 top-1/2 -translate-y-1/2 bg-black/50 text-white p-2 rounded-full hover:bg-black/70">
            <i class="fa fa-chevron-right"></i>
        </button>
        
        <!-- 轮播指示器 -->
        <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2">
            <button class="w-3 h-3 rounded-full bg-white opacity-100"></button>
            <button class="w-3 h-3 rounded-full bg-white opacity-50"></button>
            <button class="w-3 h-3 rounded-full bg-white opacity-50"></button>
        </div>
    </div>

    <!-- 商品列表 -->
    <h2 class="text-2xl font-bold mb-6">热门商品</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        {% for product in products %}
            <div class="product-card">
                <a href="{{ url_for('product_detail', product_id=product['id']) }}">
                    <img src="{{ product['image_url'] }}" alt="{{ product['name'] }}" class="w-full h-48 object-cover">
                </a>
                <div class="p-4">
                    <h3 class="font-semibold text-lg mb-2">{{ product['name'] }}</h3>
                    <p class="text-gray-600 text-sm mb-3 line-clamp-2">{{ product['description'] }}</p>
                    <div class="flex justify-between items-center">
                        <span class="text-red-600 font-bold text-xl">¥{{ "%.2f"|format(product['price']) }}</span>
                        <form action="{{ url_for('add_to_cart', product_id=product['id']) }}" method="post" class="flex items-center">
                            <input type="number" name="quantity" value="1" min="1" max="{{ product['stock'] }}" class="w-12 border border-gray-300 rounded-md px-2 py-1 mr-2 text-center">
                            <button type="submit" class="btn-primary py-1 px-3">
                                <i class="fa fa-shopping-cart mr-1"></i> 加入购物车
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock %}

{% block scripts %}
    <script>
        // 轮播图功能
        document.addEventListener('DOMContentLoaded', function() {
            const carousel = document.querySelector('.flex.transition-transform');
            const slides = carousel.children;
            const prevBtn = document.querySelector('.fa-chevron-left').parentElement;
            const nextBtn = document.querySelector('.fa-chevron-right').parentElement;
            const indicators = document.querySelectorAll('.absolute.bottom-4 button');
            
            let currentIndex = 0;
            const slideCount = slides.length;
            
            // 更新轮播显示
            function updateCarousel() {
                carousel.style.transform = `translateX(-${currentIndex * 100}%)`;
                
                // 更新指示器
                indicators.forEach((indicator, index) => {
                    if (index === currentIndex) {
                        indicator.classList.replace('opacity-50', 'opacity-100');
                    } else {
                        indicator.classList.replace('opacity-100', 'opacity-50');
                    }
                });
            }
            
            // 下一张
            nextBtn.addEventListener('click', function() {
                currentIndex = (currentIndex + 1) % slideCount;
                updateCarousel();
            });
            
            // 上一张
            prevBtn.addEventListener('click', function() {
                currentIndex = (currentIndex - 1 + slideCount) % slideCount;
                updateCarousel();
            });
            
            // 点击指示器切换
            indicators.forEach((indicator, index) => {
                indicator.addEventListener('click', function() {
                    currentIndex = index;
                    updateCarousel();
                });
            });
            
            // 自动轮播
            setInterval(function() {
                currentIndex = (currentIndex + 1) % slideCount;
                updateCarousel();
            }, 5000);
        });
    </script>
{% endblock %}
